<!-- 自定义右上角 -->
<template>
	<div v-if="refresh || !refresh" style="display: flex;align-items: center;" onClick="event.cancelBubble=true">
		<block v-if="type.indexOf('sort') > -1">
			<div v-if="isDesc" style="display: flex;align-items: center;" @click="onClick('desc')">
				<slot name="d-text"></slot>
				<slot name="desc">
					<IconFont type="desc" :disabled="descbool ? descbool() : currentIndex === dataList.length - 1"/>
				</slot>
			</div>
			<div v-if="isAsc" style="display: flex;align-items: center;" @click="onClick('asc')">
				<slot name="asc">
					<IconFont v-if="isAsc" type="asc" :disabled="ascbool ? ascbool() : currentIndex === 0"/>
				</slot>
				<slot name="a-text"></slot>
			</div>
		</block>
		<div v-if="type.indexOf('delete') > -1" @click="onClick('cuo')">
			<slot name="delete"><IconFont type="cuo"/></slot>
		</div>
	</div>
</template>

<script>
	
	import base from '@/components/index.vue'
	
	export default {
		extends: base,
		emits: ['desc', 'asc', 'cuo', 'change'],
		props: {
			/**
			 * 类型
			 * spread：显示展开和收起，接受点击事件，跟随改变
			 * sort：显示排序和删除
			 */
			type: {
				type: [String, Array],
				default: ['sort', 'delete']
			},
			/**
			 * 数据源
			 * 根据数据源的角标，判断排序的升序和降序是否可点
			 */
			dataList: Array,
			/**
			 * 要跟随变化的数据源
			 * 如果存在，将会跟随dataList的删除排序变化而变化
			 */
			changeList: Array,
			// 当前项数据的角标
			currentIndex: Number,
			// 是否显示降序
			isDesc: {
				type: Boolean,
				default: true
			},
			// 是否显示升序
			isAsc: {
				type: Boolean,
				default: true
			},
			// 是否直接删除
			isDelete: Boolean,
			// 降序的提示文字。存在的话就提示
			descText: String,
			// 升序的提示文字。存在的话就提示
			ascText: String,
			// 表示名称的字段
			nameKey: String,
			// 降序不可点的的判断方法。如果存在，代替默认的判断方法
			descbool: Function,
			// 升序不可点的的判断方法。如果存在，代替默认的判断方法
			ascbool: Function
		},
		data() {
			return {
				refresh: false,
			}
		},
		mounted() {
			
		},
		methods: {
			// 点击事件
			onClick(type) {
				const {dataList, currentIndex, isDelete, nameKey, changeList, descText, ascText} = this
				const record = dataList[currentIndex]
				switch (type){
					case 'cuo':
					{
						var action = () => {
							dataList.splice(currentIndex, 1)
							changeList && changeList.splice(currentIndex, 1)
							this.emit(type)
						}
						if (isDelete) {
							action()
						} else {
							this.core.showModal({
								content: `确定删除第${currentIndex + 1}项${nameKey && record[nameKey] ? `：“${record[nameKey]}”` : ''}吗？`,
								confirmText: '删除',
								confirmColor: this.core.theme.color.warn,
								success: res => {
									if (res.confirm) {
										action()
									}
								}
							})
						}
					}
						break
					case 'desc': // 降一位
						if (currentIndex + 1 < dataList.length) {
							var action = () => {
								dataList.splice(currentIndex, 2, dataList[currentIndex + 1], record)
								changeList && changeList.splice(currentIndex, 2, changeList[currentIndex + 1], changeList[currentIndex])
								this.refresh != this.refresh
								this.emit(type)
							}
							if (descText) {
								this.core.showModal({
									content: descText,
									confirmText: '确定',
									confirmColor: this.core.theme.color.warn,
									success: res => {
										if (res.confirm) {
											action()
										}
									}
								})
							} else {
								action()
							}
						}
						break
					case 'asc': // 升一位
						if (currentIndex - 1 >= 0) {
							var action = () => {
								dataList.splice(currentIndex - 1, 2, record, dataList[currentIndex - 1])
								changeList && changeList.splice(currentIndex - 1, 2, changeList[currentIndex], changeList[currentIndex - 1])
								this.refresh != this.refresh
								this.emit(type)
							}
							if (ascText) {
								this.core.showModal({
									content: ascText,
									confirmText: '确定',
									confirmColor: this.core.theme.color.warn,
									success: res => {
										if (res.confirm) {
											action()
										}
									}
								})
							} else {
								action()
							}
						}
						break
					default:
						break;
				}
			},
			
			emit(type) {
				this.$emit('change', type)
				this.$emit(type)
			}
		}
	}
</script>

<style>
</style>